<template>
	<view>
		<ttBar leftIcon="icon-back" title="选择位置">
			<template v-slot:rightCnt>
				<text @tap="cfmLocation">确定</text>
			</template>
		</ttBar>
		<view class="">
			<map id="mp" :latitude="long" :longitude="lat" :scale='18' :style="{'width':mapW+'px','height':mapH+'px'}"
			 @regionchange="change"></map>
		</view>
		<scroll-view class="bdList" scroll-y="true" :style="{'height':scHeight+'px'}">
			<view class="row" v-if="searchList.length>0" v-for="(item,index) in searchList" :key="index" :data-index="index" @tap="rowTap">
				<text class="bdName">{{item.name}}</text>
				<text class="bdAdd">{{item.address}}</text>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	var mapMark;
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	export default {
		components: {
			ttBar
		},
		data() {
			return {
				long: '32.040649',
				lat: '118.794139',
				areaId:0,
				mapH: uni.getSystemInfoSync().windowWidth,
				mapW: uni.getSystemInfoSync().windowWidth,
				markTop: parseInt(uni.getSystemInfoSync().windowWidth / 2 + uni.getSystemInfoSync().statusBarHeight + uni.upx2px(90) -
					16),
				markLeft: parseInt(uni.getSystemInfoSync().windowWidth / 2 - 16),
				csLong:0,
				csLat:0,
				searchList:[],
				scHeight:uni.getSystemInfoSync().windowHeight-uni.getSystemInfoSync().statusBarHeight -uni.upx2px(90)-uni.getSystemInfoSync().windowWidth			,
				ssq:[]
			};
		},
		methods: {
			change() {
				let _this=this;
				let mp = uni.createMapContext('mp', this);
				mp.getCenterLocation({
					type: 'wgs84',
					success: res => {
						_this.csLat=res.latitude;
						_this.csLong=res.longitude
						_this.getFujin();
					}
				})
			},
			getFujin(){
				API.getFujinByLongAndLat(this.csLong+','+this.csLat).then(res=>{
					
					// console.log(res.data.regeocode.pois);
					this.searchList=res.data.regeocode.pois
					console.log(res.data);
					this.ssq[0] = res.data.regeocode.addressComponent.province;
					this.ssq[1] =  res.data.regeocode.addressComponent.city;
					this.ssq[2] =  res.data.regeocode.addressComponent.district;
					this.areaId= res.data.regeocode.addressComponent.adcode
				})
				
			},
			rowTap(e){		//点击
				let opt,_index;
				if(e){
					_index=parseInt(e.currentTarget.dataset.index);
					opt={
						ssq:this.ssq,
						longi:this.csLong,
						lati:this.csLat,
						tapRow:this.searchList[_index],
						areaId:this.areaId
					}
				}else{
					_index=0;
					opt={
						ssq:this.ssq,
						longi:this.csLong,
						lati:this.csLat,
						tapRow:this.searchList[_index],
						areaId:this.areaId
					}
				}
				
				
				uni.$emit('init',opt);		//发送监听
				this.pBack()
			},
			cfmLocation(){
				this.rowTap()
			}
		},
		onLoad(opt) {
			this.long = opt.longlat.toString().split(',')[1]
			this.lat = opt.longlat.toString().split(',')[0]
			let _this = this;

			mapMark = new plus.nativeObj.View('test', {
					left: _this.markLeft + 'px',
					top: _this.markTop + 'px',
					height: '32px',
					width: '32px',
				},
				[{
					tag: 'img',
					id: 'backimg',
					src: 'static/dw2.png',
					position: {
						left: '0px',
						top: '0px',
						height: '32px',
						width: '32px'
					}
				}]);
			setTimeout(()=>{
				mapMark.show();
			},500)
			
		},
		onUnload() {
			mapMark.close();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.bdList{
		display: flex;
		flex-direction: column;
		background-color: #e7e7e7;
		.row{
			display: flex;
			flex-direction: column;
			padding: 18upx 28upx;
			background-color: #FFFFFF;
			margin-bottom: 4upx;
			.bdName{
				font-size: 28upx;
				margin-bottom: 5upx;
			}
			.bdAdd{
				font-size: 20upx;
				color: #404040;
			}
		}
	}
</style>
